
<template>
  <div class="tree">
    <div class="hello;">
      11111111
      <el-tree
        :data="menuData"
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false">
        <!-- <span>111111111</span> -->
        <div slot-scope="{ node, data }">
          <!-- <div style="height:">
          </div> -->
          <div class="basicsBox">
            <div style="width:100%;">
              <el-select size='mini' style="width:120px;" v-model="data.fruitsValues" filterable placeholder="请选择">
                <el-option
                style="width:120px;"
                  v-for="item in data.fruitsValueOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select size='mini' style="width:120px" v-model="data.sexVal" filterable placeholder="请选择">
                <el-option
                  v-for="item in data.sex"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-input style="width:120px"
                size="mini"
                placeholder="请输入内容"
                v-model="data.menuId"
                clearable>
              </el-input>
              <el-select size='mini' style="width:120px" v-model="data.hobbyVal" filterable placeholder="请选择">
                <el-option
                  v-for="item in data.hobby"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button type="primary" size="mini" @click="CopyCurrent(node, data,'equative')">增加同级</el-button>
              <el-button type="primary" size="mini" @click="CopyCurrent(node, data,'son')">增加子级</el-button>
              <i class="el-icon-remove-outline" @click="loseCurrent(node,data)"></i>

              <!-- <div class="radiusClass" v-show="data.isShowRadio">
                <el-radio v-model="data.radio" label="1">且</el-radio>
                <el-radio v-model="data.radio" label="2">或</el-radio>
              </div> -->
          </div>
          <div>
          <div style="margin:1px" v-for="(son,index) of data.children" :key="index">
            <el-select size='mini' style="width:120px;" v-model="data.fruitsValues" filterable placeholder="请选择">
              <el-option
              style="width:120px;"
                v-for="item in data.fruitsValueOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select size='mini' style="width:120px" v-model="data.sexVal" filterable placeholder="请选择">
              <el-option
                v-for="item in data.sex"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input style="width:120px"
              size="mini"
              placeholder="请输入内容"
              v-model="data.menuId"
              clearable>
            </el-input>
            <el-select size='mini' style="width:120px" v-model="data.hobbyVal" filterable placeholder="请选择">
              <el-option
                v-for="item in data.hobby"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" size="mini" @click="CopyCurrent(node, data,'equative')">增加同级</el-button>
            <el-button type="primary" size="mini" @click="CopyCurrent(node, data,'son')">增加子级</el-button>
            <i class="el-icon-remove-outline" @click="loseCurrent(node,data)"></i>
            <!-- <div class="radiusClass" v-show="data.isShowRadio">
              <el-radio v-model="data.radio" label="1">且</el-radio>
              <el-radio v-model="data.radio" label="2">或</el-radio>
            </div> -->
          </div>
          </div>
          <div style="background:red">1111111111</div>
        </div>

        </div>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      number: 2,
      tag: '....',
        reNameVal: '', // 修改后的表或者分组名称
        isOne: false, // 是否增加一级标题 默认不是
        textarea: '', // 添加分组时备注
        makedate: {}, // 操作数据
        menuId: '1',
        newId: 1, // 前端生成id
        tableTitle: '',
        newTitle: '', // 新增表名称
        radio: '2',
        renameData: {name: ''},
        isShowReNam: true, // 重命名框是否显示
        isShowAddModel: false, // 添加表名是否显示
        menuData: [
            {
              'menuId': 'menu_gp1',
              'name': '分组1',
              'type': '1',
              'attr': '1',
              'parentId': '0',
              'path': 'menu_gp1',
              'mark': '1',
              'seqno': 1,
              'createdBy': 'lzy',
              'createdDt': '20210113',
              'updatedBy': 'lzy',
              'updatedDt': '20210113',
              children:
              [
              {
                'menuId': 'menu_tb57',
                'name': '表55555555555',
                'type': '1',
                'attr': '2',
                'parentId': 'menu_gp2',
                'path': 'menu_tb1',
                'mark': '1',
                'seqno': 1,
                'createdBy': 'lzy',
                'createdDt': '20210113',
                'updatedBy': 'lzy',
                'updatedDt': '20210113',
                'children': null
            }
            ]
           },
           {
                'menuId': 'menu_tb57',
                'name': '表55555555555',
                'type': '1',
                'attr': '2',
                'parentId': 'menu_gp2',
                'path': 'menu_tb1',
                'mark': '1',
                'seqno': 1,
                'createdBy': 'lzy',
                'createdDt': '20210113',
                'updatedBy': 'lzy',
                'updatedDt': '20210113',
                'children': null
            }],
        options: [{
          tableTitle: 'sql',
          label: 'SQL'
        }, {
          tableTitle: 'EXCEL',
          label: 'EXCEL'
        }, {
          tableTitle: '数据库',
          label: '数据库'
        }, {
          tableTitle: '自助数据集',
          label: '自助数据集'
        } ],
        tableTitle: '',
        activatedId: '',
      treeData: [
        {
          id: 1,
          name: '技术部',
          level: 1,
          child: [
            {
              id: 2,
              name: '运维组',
              level: 2,
              child: [
                {
                  id: 3,
                  name: '测试',
                  level: 3,
                  child: [
                    {
                      id: 4,
                      name: '前端',
                      level: 4,
                      child: [
                        {
                          id: 6,
                          name: '前端',
                          level: 4
                        }
                      ],
                      child: [
                        {
                          id: 4,
                          name: '前端',
                          level: 4

                        }
                      ],
                      child: [
                        {
                          id: 5,
                          name: '前端',
                          level: 4
                        }
                      ]

                    }
                  ]
                },
                {
                  id: 4,
                  name: '前端',
                  level: 4
                }
              ]
            },
            {
              id: 4,
              name: '测试组',
              level: 2,
              child: []
            }
          ]
        }
      ],
      defaultProps: {
        children: 'childrens',
        label: 'name'
      }
    }
  },
  methods: {
    CopyCurrent (node, data, addRank) {
      console.log(node)
      console.log(data)
      this.id++
      let newChild = {
            id: this.id,
            fruitsNameId: 10,
            pid: data.id || data.menuId,
            fruitsName: '水果',
            fruitsValues: null,
            sexVal: null,
            hobbyVal: null,
            input: '123', // 输入框变量
            // radio:"",
            // isShowRadio:false,
            fruitsValueOptions: [
                {
                    value: '1',
                    label: '橙汁'
                },
                {
                    value: '3158',
                    label: '猕猴桃'
                }
            ],
            sex: [
                {
                    value: '1',
                    label: '男'
                },
                {
                    value: '0',
                    label: '女'
                }
            ],
            hobby: [
                  {
                    value: 1,
                    label: '乒乓球'
                  },
                  {
                    value: 2,
                    label: '篮球'
                  },
                  {
                    value: 3,
                    label: '音乐'
                  }
            ]
        }
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        if (addRank == 'son') {
          console.log('++++++++++++++++++')
          console.log(data.children.length)
          let length = data.children.length
          // if (length>0) {
          //   data.children[length-1].isShowRadio=true;
          // }
          data.children.push(newChild)
        } else if (!node.parent.parent) { // 一级增加同级
        console.log('一级增加同级')
          let length = this.options.length
          // if (length>0) {
          //   this.options[length-1].isShowRadio=true;
          // }
          this.menuData.push(newChild)
        } else { // 有父亲孩子的同级
          console.log('增加有父亲的同级')
          let length = node.parent.data.children.length
          // if (length>0) {
          //   node.parent.data.children[length-1].isShowRadio=true;
          // }
          node.parent.data.children.push(newChild)
        }
    },
    loseCurrent (node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    }
  }
}
</script>
<style lang="less">
.tree{
      overflow-y: scroll;
      overflow-x: scroll;
      width:800px;
      height: 500px;
  }
 .el-tree {
     min-width: 100%;
     display:inline-block !important;
  }
/deep/ .hello {
  overflow-x: scroll;
  background: green;
  .el-tree{
    height:600px
  }
  .el-tree > .el-tree-node > .el-tree-node__content:first-child {
    &::before,
    &::after {
      border: none;
    }
  }
  .el-tree-node .el-tree-node__content {
    &::before,
    &::after {
      content: "";
      line-height: 100%;
      right: auto;
    }
    &::before {
      border-left: 1px solid #e6e6e6;
      bottom: 60px;
      height: 100%;
      width: 1px;
      margin-left: -5px;

    }
    &::after {
      border-top: 1px solid #e6e6e6;

      width: 20px;
      margin-left: -5px;
    }
  }
  .el-tree .el-tree-node {
    position: relative;
  }

}
.basicsBox{
    height:400px;
    width:1200px;
    border:1px solid #ff0000;
    display:flex;
    position:relative;
    margin-top:372px;
    overflow-x: scroll;
  }
</style>
